<script setup lang="ts">
    import {reactive} from 'vue'
    import Child1 from './Child1.vue'
    //数据定义在父组件身上
    let books = reactive(['java全栈','mysql入门','vue实战'])

    let foods = reactive(['臭豆腐','沙县小吃','兰州拉面'])
</script>
<template>
    <h1>父组件-默认插槽</h1>
    <div id="outer">
        <Child1 title="精神食粮">
            <!-- 插槽内容 -->
            <ul>
                <li v-for="b in books">{{ b }}</li>
            </ul>
        </Child1>
        <Child1 title="网红美食">
             <!-- 插槽内容 -->
             <ul>
                <li v-for="f in foods">{{ f }}</li>
            </ul>
        </Child1>
    </div>
</template>
<style scoped>
    #outer{
        width: 80%;
        margin: auto;
        height: 500px;
        border: 1px solid green;
        border-radius: 5px;
        display:flex
    }
</style>